<template>
	<view>
		<view class="page">
			<!-- <uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back"
			 style="position: relative;">
				<view class="flex-item">维护任务统计</view>
				<view class="flex-item flex-right" style="position: absolute;top: 18px;right: 22px;">
				</view>
			</uni-nav-bar> -->
			<view class="page-index">维护任务统计</view>
			<view class="analysis-container">
				<navigator url="../../personal/hand/wind_team">
					<view class="analysis-tent">
						<view class="analysis-logo"><image src="../../../static/images/wind-logopeople.png" mode=""></image></view>
						<view class="analysis-logowords">风专业队</view>
					</view>
				</navigator>
				<view class="analysis-lee">
					<view class="analysis-left">
						<view class="analysis-little">任务来源统计</view>
						<mpvue-echarts canvasId="chat1" ref="chart1" :echarts="echarts" :onInit="fn10nInit"></mpvue-echarts>
					</view>
					<view class="analysis-right">
						<view class="analysis-little">任务完成情况</view>
						<view class="little-one">
							<view class="little-size">待接收</view>
							<view class="little-color">{{ waitNum }}</view>
						</view>
						<view class="little-two">
							<view class="little-size">已完成</view>
							<view class="little-color">{{ finishNum }}</view>
						</view>
						<view class="little-three">
							<view class="little-size">已接收</view>
							<view class="little-color">{{ received }}</view>
						</view>
						<mpvue-echarts canvasId="chat2" :echarts="echarts" :onInit="fn20nInit"></mpvue-echarts>
					</view>
				</view>
				<view class="analysis-center">
					<view class="analysis-duiwords">各专业队处理任务时长</view>
					<view class="analysis-content">
						<view class="analysis-progress" v-for="(item, index) in hours" :key="index">
							<view class="analysis-one">{{ item.name }}</view>
							<view class="analysis-two"><progress :percent="item.value" active color="#2E87ED" /></view>
							<view class="analysis-three">{{ item.value }}</view>
						</view>
					</view>
				</view>
				<view class="analysis-toolipe">
					<view class="analysis-duiwords-bottom">各专业队人均处理任务统计</view>
					<view class="analysis-content-bottom"><mpvue-echarts canvasId="chat3" :echarts="echarts" :onInit="fn3OnInit" /></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import cmdIcon from '@/components/cmd-icon/cmd-icon.vue';
import * as echarts from 'echarts';
import mpvueEcharts from 'mpvue-echarts';
import graceCirProgress from '../../../components/graceCirProgress/graceCirProgress.vue';

let chart;
let chart2;
let chart3;
let numberChart = '214';

//任务来源统计
function fn1(canvas, width, height) {
	chart = echarts.init(canvas, null, {
		width: width,
		height: height
	});
	canvas.setChart(chart);

	let option1 = {
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			x: 'right',
			data: []
		},
		series: [
			{
				name: '数据信息',
				type: 'pie',
				color: ['#6DDEE1', '#6DA7FF', '#FB7095', '#FD985E', '#9281FF', '#DB71E1'],
				radius: ['40%', '50%'],
				center: ['35%', '50%'],
				avoidLabelOverlap: true,
				label: {
					normal: {
						show: false,
						position: 'center'
					},
					emphasis: {
						show: true,
						textStyle: {
							fontSize: '12',
							fontWeight: 'bold'
						}
					}
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: []
			}
		]
	};
	chart.setOption(option1);
	return chart;
}

//任务完成情况
function fn2(canvas, width, height) {
	chart2 = echarts.init(canvas, null, {
		width: width,
		height: height
	});
	canvas.setChart(chart2);

	let option = {
		tooltip: {
			trigger: 'item'
		},
		series: [
			{
				name: '数据信息',
				type: 'pie',
				color: ['#00A8EC', '#69DBBC', '#C8DEFC'],
				radius: ['40%', '50%'],
				avoidLabelOverlap: true,
				label: {
					normal: {
						show: false,
						position: 'center'
					},
					emphasis: {
						show: true,
						textStyle: {
							fontSize: '12',
							fontWeight: 'bold'
						}
					}
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				itemStyle: {
					normal: {
						borderWidth: 6,
						borderColor: '#fff'
					}
				},
				// 	data: [{
				// 			value: 335,
				// 			name: '待接收',
				// 			itemStyle: {
				// 				normal: {
				// 					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				// 							offset: 0.8,
				// 							color: '#547FE1'
				// 						},
				// 						{
				// 							offset: 0.5,
				// 							color: '#5FAECD'
				// 						},
				// 						{
				// 							offset: 0.3,
				// 							color: '#70FBAF'
				// 						}
				// 					])
				// 				}
				// 			}
				// 		},
				// 		{
				// 			value: 190,
				// 			name: '已接收',
				// 			itemStyle: {
				// 				normal: {
				// 					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				// 							offset: 1,
				// 							color: '#716EF5'
				// 						},
				// 						{
				// 							offset: 0.5,
				// 							color: '#5A7FF5'
				// 						},
				// 						{
				// 							offset: 0.1,
				// 							color: '#4590F6'
				// 						}
				// 					])
				// 				}
				// 			}
				// 		},
				// 		{
				// 			value: 234,
				// 			name: '已完成',
				// 			itemStyle: {
				// 				normal: {
				// 					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				// 							offset: 1,
				// 							color: '#00A8EC'
				// 						},
				// 						{
				// 							offset: 0.5,
				// 							color: '#00A8EC'
				// 						},
				// 						{
				// 							offset: 0.1,
				// 							color: '#01C0E0'
				// 						}
				// 					])
				// 				}
				// 			}
				// 		}
				// ]
				data: []
			}
		]
	};

	chart2.setOption(option);
	return chart2;
}

//柱状图
function fn3(canvas, width, height) {
	chart3 = echarts.init(canvas, null, {
		width: width,
		height: height
	});
	canvas.setChart(chart3);

	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#999'
				}
			}
		},
		legend: {
			data: ['任务总量', '人均处理任务时长']
		},
		barWidth: 40,
		xAxis: [
			{
				type: 'category',
				data: [],
				axisPointer: {
					type: 'shadow'
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				name: '任务数（个）',
				min: 0,
				max: 100,
				interval: 10,
				axisLabel: {
					formatter: '{value}'
				}
			}
		],
		series: [
			// {
			// 	name: '任务总量',
			// 	type: 'bar',
			// 	data:[],
			// 	itemStyle: {
			// 		normal: {
			// 			color: function(params) {
			// 				var colorList = ['#05C9F9'];
			// 				return colorList[params.dataIndex];
			// 			}
			// 		}
			// 	}
			// },
			// {
			// 	name: '人均处理任务时长',
			// 	type: 'line',
			// 	color: ['#5FDBA2'],
			// 	data:[]
			// }
		]
	};

	chart3.setOption(option);
	return chart3;
}

export default {
	data() {
		return {
			echarts,
			fn10nInit: fn1,
			fn20nInit: fn2,
			fn3OnInit: fn3,
			fn1Data: [],
			fn1LegendData: [],
			fn2Data: [],
			hours: [],
			waitNum: '',
			finishNum: '',
			received: ''
		};
	},

	components: {
		uniNavBar,
		uniIcon,
		cmdIcon,
		mpvueEcharts,
		graceCirProgress
	},

	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			});
		},

		getFn1Data() {
			let _this = this;
			this.$api.StaticAanalysis.GetStatistics().then(res => {
				console.log(res[1].data);
				this.fn1LegendData = res[1].data.result[0].legend;
				this.fn1Data = res[1].data.result[0].data;
				this.fn2Data = res[1].data.result[1].data;
				this.hours = res[1].data.result[2].data;
				this.waitNum = this.fn2Data[0].value;
				this.received = this.fn2Data[1].value;
				this.finishNum = this.fn2Data[2].value;
				console.log(numberChart);
				chart.setOption({
					legend: {
						orient: 'vertical',
						x: 'right',
						data: this.fn1LegendData
					},
					series: [
						{
							data: this.fn1Data
						}
					]
				});

				chart2.setOption({
					series: [
						{
							data: this.fn2Data
						}
					]
				});
				chart3.setOption({
					xAxis: [
						{
							data: res[1].data.result[3].legend
						}
					],
					series: [
						{
							name: '任务总量',
							type: 'bar',
							data: res[1].data.result[3].num,
							itemStyle: {
								normal: {
									color: function(params) {
										var colorList = ['#05C9F9'];
										return colorList[params.dataIndex];
									}
								}
							}
						},
						{
							name: '人均处理任务时长',
							type: 'line',
							color: ['#5FDBA2'],
							data: res[1].data.result[3].dataseries
						}
					]
				});
			});
		}
	},
	onLoad: async function() {
		await this.getFn1Data();
	},
	onReady: async function() {
		await this.getFn1Data();
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #efeff4;
}

.page-index {
	width: 100%;
	height: 44px;
	background-color: #003466;
	padding-top: 30px;
	font-size: 20px;
	color: #ffffff;
	line-height: 44px;
	text-align: center;
}

.analysis-container {
	width: 94%;
	/* height: 300px; */
	border-radius: 3px;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 10px;
	overflow: hidden;
	padding-bottom: 40px;
	padding-top: 66px;
}

.analysis-tent {
	width: 96%;
	border-bottom: 1px solid #eeeeee;
	margin: 0 auto;
	overflow: hidden;
	padding-bottom: 15px;
}

.analysis-logo {
	width: 52px;
	height: 52px;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
}

.analysis-logo image {
	max-width: 100%;
	max-height: 100%;
}

.analysis-logowords {
	font-size: 16px;
	color: #333333;
	float: left;
	margin: 15px;
}

.analysis-lee {
	width: 96%;
	height: 252px;
	margin: 0 auto;
	margin-top: 10px;
}

.analysis-left {
	width: 48%;
	height: 100%;
	float: left;
	background: #ffffff;
	box-shadow: 0px 2px 9px 0px rgba(61, 61, 61, 0.19);
	border-radius: 5px;
	position: relative;
	/* display: flex;
		justify-content: center;
		align-items: center; */
}

.analysis-right {
	width: 48%;
	height: 100%;
	float: right;
	background: #ffffff;
	box-shadow: 0px 2px 9px 0px rgba(61, 61, 61, 0.19);
	border-radius: 5px;
	position: relative;
}

.analysis-center {
	width: 96%;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 10px;
	box-shadow: 0px 2px 9px 0px rgba(61, 61, 61, 0.19);
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 12px;
	padding-bottom: 12px;
	overflow: hidden;
	position: relative;
}

.analysis-toolipe {
	width: 96%;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 10px;
	box-shadow: 0px 2px 9px 0px rgba(61, 61, 61, 0.19);
	border-radius: 5px;
	padding-top: 12px;
	padding-bottom: 12px;
	overflow: hidden;
	position: relative;
}

.analysis-content {
	width: 96%;
	margin: 0 auto;
	margin-top: 12px;
}

.analysis-content-bottom {
	width: 100%;
	height: 450px;
	margin: 0 auto;
	position: relative;
	margin-top: 30px;
}

.analysis-duiwords {
	font-size: 17px;
	color: #000000;
	font-weight: 400;
	position: absolute;
	left: 2%;
	top: 1%;
	margin-top: 8px;
}

.analysis-duiwords-bottom {
	font-size: 17px;
	color: #000000;
	font-weight: 400;
	position: absolute;
	left: 2%;
	top: 1%;
	margin-top: 8px;
}

.analysis-progress {
	margin-top: 22px;
	font-size: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
}

.analysis-one {
	width: 12%;
	color: #f33228;
	font-size: 14px;
}

.analysis-two {
	width: 78%;
	height: 10px;
	border-radius: 2.5px;
	opacity: 0.8;
}

.analysis-three {
	width: 4%;
	font-size: 14px;
}

.newtwo-color {
	color: #32f389;
}

.newother-color {
	color: #47adf1;
}

page {
	min-height: 100%;
}

.page-section-title {
	padding: 0 30upx;
}

.container {
	padding-bottom: 10px;
	box-sizing: border-box;
}

.container,
.canvasView {
	flex: 1;
	flex-direction: column;
}

.navigate {
	color: #007aff;
}

.canvas-bar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.update-btn {
	margin-right: 30upx;
}

.analysis-little {
	font-size: 20px;
	position: absolute;
	left: 18%;
	top: 6%;
}

.uni-navbar--shadow {
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 2;
}

.little-one {
	font-size: 16px;
	position: absolute;
	left: 11%;
	top: 26%;
}

.little-two {
	font-size: 16px;
	position: absolute;
	left: 11%;
	bottom: 18%;
}

.little-three {
	font-size: 16px;
	position: absolute;
	right: 10%;
	top: 35%;
}

.little-size {
	color: #666666;
}

.little-color {
	font-family: Noto Sans CJK SC;
	font-weight: 300;
	color: rgba(233, 233, 233, 1);
	background: linear-gradient(0deg, rgba(1, 201, 220, 1) 0%, rgba(0, 168, 236, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
</style>
